<template>
  <div class="sgMap-body">
    <!-- 引入百度地图 -->
    <div id="SGbaidu3Dmap" v-show="data.type === 3"></div>
    <baidu-map id="SGbaidumap" v-if="data.type !== 3" @ready="initBaiduMap">
    </baidu-map>
  </div>
</template>

<script>
// import custom_map_config from "@/json/custom_map_config";
export default {
  components: {},
  data() {
    return {
      map: null, // 百度地图对象
      // _MyMap: null,//瓦片图对象
    };
  },
  props: ["data"],
  mounted() {
    this.data.type === 3 &&
    setTimeout(() => {
      this.initBaidu3DMap();
    }, 2000);
  },

  methods: {
    initBaidu3DMap() {
      this.map = new BMapGL.Map("SGbaidu3Dmap");
      this.map.centerAndZoom(
        new BMapGL.Point(this.data.coordinate[0], this.data.coordinate[1]),
        this.data.zoom || 19
      );
      this.map.enableScrollWheelZoom(true); //启用滚轮放大缩小
      //设置3D角度----------------------------------------
      this.map.setHeading(64.5);
      this.map.setTilt(73);

      // 设置自定义mark点位________________________
      this.map.addOverlay(
        new BMapGL.Marker(
          new BMapGL.Point(this.data.coordinate[0], this.data.coordinate[1]),
          {
            icon: new BMapGL.Icon(
              require("/src/assets/icons/svg/money.svg"),
              new BMapGL.Size(32, 32) //图标的宽高
            ),
          }
        )
      ); // 将标注添加到地图中
    },
    // 初始化百度地图
    initBaiduMap({ BMap, map }) {
      this.map = map;
      this.map.setMapStyle({ style: this.data.style || "googlelite" }); //默认：精简风格(googlelite)，模板页可以查看http://lbsyun.baidu.com/custom/list.htm

      // 去这个位置编辑http://lbsyun.baidu.com/apiconsole/custommap个性化地图

      // this.map.setMapStyle({ styleJson: custom_map_config });
      // this._MyMap = new BMap.MapType('MyMap', this._tileLayer, {minZoom: minZoom || 1, maxZoom: maxZoom || window.maxZoom});
      // 设置地图显示类型----------------------------------------
      const mapTypes = [
        BMAP_NORMAL_MAP, //此地图类型展示普通街道视图
        BMAP_SATELLITE_MAP, //此地图类型展示卫星视图
        BMAP_HYBRID_MAP, //此地图类型展示卫星和路网的混合视图
      ];
      if (this.data.type === 3) {
        this.map.setHeading(64.5);
          this.map.setTilt(73);
        //3D地图
      } else this.map.setMapType(mapTypes[this.data.type]);

      // ----------------------------------------
      this.map.enableScrollWheelZoom(true); //启用滚轮放大缩小
      this.map.centerAndZoom(
        new BMap.Point(this.data.coordinate[0], this.data.coordinate[1]),
        this.data.zoom || 14
      ); // 初始化地图,设置中心点坐标和地图级别

      // 设置自定义mark点位________________________
      this.map.addOverlay(
        new BMap.Marker(
          new BMap.Point(this.data.coordinate[0], this.data.coordinate[1]),
          {
            icon: new BMap.Icon(
              require("/src/assets/icons/svg/money.svg"),
              new BMap.Size(32, 32) //图标的宽高
            ),
          }
        )
      ); // 将标注添加到地图中
    },
  },
};
</script>

<style lang='scss' scoped>
// ----------------------------------------
.sgMap-body {
  transition: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  >>> #SGbaidumap,
  >>> #SGbaidu3Dmap {
    width: 100%;
    height: 100%;
    & > div {
      background-color: transparent !important;
    }
  }
}
/*
去除百度地图版权
去除右上角[地图、卫星、三维]控件
去除百度地图右上角平移缩放控件的市县区文字
*/
>>> .anchorBL,
>>> .anchorTR,
>>> .BMap_zlHolder {
  display: none;
  visibility: hidden;
}
</style>
